<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>图片转文字、字符画、字符图</title>
    <meta name="keywords" content="图片转文字、字符画、字符图"/>
    <Meta name="Description" Content="上传图像文件，即时生成字符画">
    <Meta name="Robots" Content="Follow">
    <link rel="stylesheet" href="./layui/css/layui.css"/>
<body  style="height:100%;">
<div class="layui-layer layui-layer-page layui-layer-dir" id="zoom" type="page" times="1" showtime="0"
     contype="object" style="z-index: 19891015; top: 107px;display:none">
    <div class="layui-layer-title" style="cursor: move;    padding: 0 25px 0 20px;">缩放</div>
    <div id="" class="layui-layer-content" style="height: 300px;">
        <div id="slideTest2" class="demo-slider" style="margin-top: 50px;"></div>
    </div>
</div>


<div class="layui-layer layui-layer-page layui-layer-dir" type="page" times="1" showtime="0"
     contype="object" style="z-index: 19895; top: 10px;left: 50%;margin-left: -58px;">
    <button type="button" class="layui-btn" id="img-upload" title="图像文件不能超过5M">
        <i class="layui-icon layui-icon-picture"></i>上传图片
    </button>
</div>

<pre class="result" style="white-space: pre;line-height: 9px;">
</pre>

</body>
<script src="./layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['upload', 'jquery', 'slider','layer'], function () {
        var $ = layui.jquery,
            upload = layui.upload,
            slider = layui.slider
            layer = layui.layer;
        ;
        //创建一个上传组件
        upload.render({
            elem: '#img-upload'
            , url: '/uploadFile'
            ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(); //上传loading
            }
            , done: function (res, index, upload) { //上传后的回调
                layer.closeAll('loading'); //关闭loading
                if (res.code == 0) {
                    layer.msg("解析成功");
                    $(".result").text(res.data);
                    $("#zoom").css("display", "block");
                }else{
                    layer.alert(res.msg, {
                        closeBtn: 0
                        ,anim: 4 //动画类型
                    });
                }
            }
            //,accept: 'file' //允许上传的文件类型
            ,size: 50*1024 //最大允许上传的文件大小单位 KB
            //,……
        });


        //定义初始值
        slider.render({
            elem: '#slideTest2'
            , value: 80 //初始值
            , min: 1
            , max: 200
            , type: 'vertical' //垂直滑块
            // ,step:10
            , setTips: function (value) { //自定义提示文本
                return value + '%';
            }
            , change: function (value) {
                value = value.replace("%", "");
                $(".result").css("transform", "scale(" + value / 200 + ")")
            }
        });

    });
</script>
</html>